﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Article.aspx.cs" Inherits="XpressNews.Article" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" runat="server"> </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphMain" runat="server">
    <!-- Template -->
    <%--
    <article class="article-container clearfix" itemscope itemtype="http://schema.org/Article">
    <div class="article-content clearfix">
    <header>
    <div class="breadcrumb-container clearfix" itemscope itemtype="http://schema.org/WebPage">
    <ul class="breadcrumb ltr" itemprop="breadcrumb">
    <li>
    <i class="icon-home3"></i><a href="#">Home</a>
    </li>
    <li>
    <a href="#">Technology</a>
    </li>
    <li>
    <a href="#">Smartphones</a>
    </li>
    <li>
    Bear Introduced to Snow for the First Time
    </li>
    </ul>
    </div>

    <div class="figure-container">
    <figure class="featured-post-figure" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">

    <img itemprop="contentURL" src="img-samples/1.png"/>

    <figcaption itemprop="description">
    A few words about item
    </figcaption>
    </figure>
    </div>

    <h1 itemprop="headline">
    Bear Introduced to Snow for the First Time
    </h1>

    <div class="post-meta">
    <ul>
    <li>
    <i class="icon-user3"></i><a href="#">Serpentsoft</a>
    </li>
    <li>
    <i class="icon-library"></i><a href="#">World</a>
    </li>

    <li itemprop="datePublished">
    <i class="icon-alarm2"></i>14 Aug, 2013 at 06:15 AM
    </li>
    <li>
    <i class="icon-bubbles4"></i><a href="#" itemprop="interactionCount">4 Comments</a>
    </li>
    <li itemprop="interactionCount">
    <i class="icon-tv"></i>35
    </li>
    <li itemprop="interactionCount">
    <i class="icon-heart"></i>100
    </li>
    </ul>
    </div>
    <div class="divider"></div>
    </header>

    <div class="post-entry" itemprop="articleBody">

    <span class="drop-capital">F</span>
    our gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum,
    nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
    Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.
    Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. <span class="highlight">Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat</span>, velit mauris egestas quam,
    ut aliquam massa nisl quis neque. Suspendisse in orci enim.

    <ul class="post-ul">
    <li>
    <i class="icon-thumbs-up"></i>More Than 350 List Types.
    </li>
    <li>
    <i class="icon-thumbs-up"></i>Unlimited Colors.
    </li>
    <li>
    <i class="icon-thumbs-up"></i>Easy To Use.
    </li>
    <li>
    <i class="icon-thumbs-up"></i>100% Unique Widget Style.
    </li>
    <li>
    <i class="icon-thumbs-up"></i>Weather & Review Widgets.
    </li>
    <li>
    <i class="icon-thumbs-up"></i>Author Posts.
    </li>
    </ul>

    <blockquote>
    <p>
    Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, Highlight Text: lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibhvulputate cursus a sit amet mauris.
    </p>
    </blockquote>

    <nav class="post-navigation clearfix">
    <div class="prev-article col-md-6 col-sm-6 col-xs-12">
    <cite>Previous Article</cite>
    <h3>
    India Takes Down Its First Cyber Criminal
    </h3>
    <a href="#Prev_Article" class="more"></a>
    </div>

    <div class="next-article col-md-6 col-sm-6 col-xs-12">
    <cite>Next Article</cite>
    <h3>
    Bear Introduced to Snow for the First Time
    </h3>
    <a href="#Next_Article" class="more"></a>
    </div>
    </nav>
    </div>

    <footer class="article-boxes clearfix">
    <aside class="tags-box clearfix" data-showonscroll="true" data-animation="fadeIn">
    <div class="box-title">
    <h3>
    Tagged With:
    </h3>
    </div>

    <div class="box-content tags-cloud clearfix">
    <a href="#">Technology<span class="badge">15</span></a>
    <a href="#">President<span class="badge">10</span></a>
    <a href="#">Coup<span class="badge">13</span></a>
    </div>
    </aside>

    <aside class="share-box clearfix" data-showonscroll="true" data-animation="fadeIn">
    <div class="box-title">
    <h3>
    Share On:
    </h3>
    </div>

    <div class="box-content share-icons clearfix">
    <a href="#" class="facebook">facebook<span class="badge"><i class="zoc-facebook"></i></span></a>
    <a href="#" class="twitter">twitter<span class="badge"><i class="zoc-twitter"></i></span></a>
    <a href="#" class="gplus">google+<span class="badge"><i class="zoc-gplus"></i></span></a>
    <a href="#" class="pinterest">pinterest<span class="badge"><i class="zoc-pinterest"></i></span></a>
    <a href="#" class="stumbleupon">stumbleupon<span class="badge"><i class="zoc-stumbleupon"></i></span></a>
    </div>
    </aside>

    <aside class="author-box clearfix" itemprop="author" itemscope="" itemtype="http://schema.org/Person" data-showonscroll="true" data-animation="fadeIn">
    <div class="box-title">
    <h3 class="hidden">
    Written By:
    </h3>
    <div itemprop="image">
    <img alt="Serpentsoft" src="img-samples/avatars/1.png" class="avatar"/>
    </div>
    </div>

    <div class="box-content clearfix">
    <h4 class="name">
    <a itemprop="name" href="pg-category.html" title="Serpentsoft">Serpentsoft</a>
    </h4>

    <div itemprop="description">
    <p>
    A few words about article's author, I am a Web Developer and Designer, i love computer programming either Desktop or Web
    </p>
    </div>

    <div class="social-icons">
    <ul class="clearfix">
    <li class="tooltip_item fb-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="facebook">
    <div class="mask-background animated lightSpeedIn"></div>
    <a href="#"><i class="zoc-facebook"></i></a>
    </li>

    <li class="tooltip_item twitter-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="twitter">
    <div class="mask-background animated lightSpeedIn"></div>
    <a href="#"><i class="zoc-twitter"></i></a>
    </li>

    <li class="tooltip_item googleplus-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="google+">
    <div class="mask-background animated lightSpeedIn"></div>
    <a href="#"><i class="zoc-gplus"></i></a>
    </li>

    <li class="tooltip_item pinterest-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="pinterest">
    <div class="mask-background animated lightSpeedIn"></div>
    <a href="#"><i class="zoc-pinterest"></i></a>
    </li>

    <li class="tooltip_item youtube-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="youtube">
    <div class="mask-background animated lightSpeedIn"></div>
    <a href="#"><i class="zoc-youtube"></i></a>
    </li>

    <li class="tooltip_item github-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="github">
    <div class="mask-background animated lightSpeedIn"></div>
    <a href="#"><i class="zoc-github-circled"></i></a>
    </li>

    <li class="tooltip_item flickr-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="flickr">
    <div class="mask-background animated lightSpeedIn"></div>
    <a href="#"><i class="zoc-flickr"></i></a>
    </li>

    <li class="tooltip_item rss-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="rss">
    <div class="mask-background animated lightSpeedIn"></div>
    <a href="#"><i class="zoc-rss"></i></a>
    </li>

    <li class="tooltip_item email-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="send an email to Serpentsoft">
    <div class="mask-background animated lightSpeedIn"></div>
    <a href="#"><i class="zoc-email"></i></a>
    </li>

    <li class="tooltip_item website-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="visit Serpentsoft's website">
    <div class="mask-background animated lightSpeedIn"></div>
    <a href="#"><i class="zoc-ie"></i></a>
    </li>
    </ul>
    </div>
    </div>
    </aside>

    <!-- Related Article Box -->
    <aside id="divRelatedBox_1" class="cat-widget wdg-cat-scrollbox cat-scroll-box clearfix">

    <div class="widget-title">
    <h3>
    Related Articles
    </h3>

    <div class="sep-widget"></div>
    </div>

    <div class="widget-content color-theme clearfix">
    <div>
    <ul class="nav-arrows list-inline">
    <li>
    <a href="#" class="backward"><i class="icon-arrow-left6"></i></a>
    </li>
    <li>
    <a href="#" class="forward"><i class="icon-arrow-right6"></i></a>
    </li>
    </ul>

    <div class="scroll-box">
    <div class="post-item">
    <article class="post-box clearfix">
    <a class="post-thumbnail"> <img src="img-samples/1-md.jpg" alt="post-4"/></a>

    <div class="top-bar">
    <span class="likes"><a href="#"><i class="icon-heart"></i>10</a></span>

    <span class="comments"><i class="icon-bubble"></i>1500</span>
    <span class="views"><i class="icon-tv"></i>2000</span>

    <span class="btn-srp"><a href="pg-category.html">Sport</a></span>
    </div>

    <div class="title-bar">
    <h4 class="post-title">
    <a href="#">Post With Featured Image</a>
    </h4>

    <div class="meta-info">
    <span class="author"><i class="icon-user3"></i><a href="#">Serpentsoft</a></span>
    <span class="date-time"><i class="icon-alarm2"></i>14 Aug 2013, 05:15 AM</span>
    </div>
    </div>

    <div class="bottom-bar">
    <span class="btn-srp"><a href="#">Read More...</a></span>

    <div class="rating">
    <div class="stars retina x-2">
    <div class="gray">
    <i></i><i></i><i></i><i></i><i></i>
    </div>

    <div class="fill" style="width: 90%">
    <div class="light">
    <i></i><i></i><i></i><i></i><i></i>
    </div>
    </div>
    </div>
    </div>
    </div>
    </article>
    </div>

    <div class="post-item">
    <article class="post-box clearfix">
    <a class="post-thumbnail"> <img src="img-samples/2-md.jpg" alt="post-2"/></a>

    <div class="top-bar">
    <span class="likes"><a href="#"><i class="icon-heart"></i>10</a></span>

    <span class="comments"><i class="icon-bubble"></i>1500</span>
    <span class="views"><i class="icon-tv"></i>2000</span>

    <span class="btn-srp"><a href="#">Movies</a></span>
    </div>

    <div class="title-bar">
    <h4 class="post-title">
    <a href="#">Post With Youtube Video</a>
    </h4>

    <div class="meta-info">
    <span class="author"><i class="icon-user3"></i><a href="#">Serpentsoft</a></span>
    <span class="date-time"><i class="icon-alarm2"></i>14 Aug 2013, 05:15 AM</span>
    </div>
    </div>

    <div class="bottom-bar">
    <span class="btn-srp"><a href="#">Read More...</a></span>

    <div class="rating">
    <div class="stars retina x-2">
    <div class="gray">
    <i></i><i></i><i></i><i></i><i></i>
    </div>

    <div class="fill" style="width: 50%">
    <div class="light">
    <i></i><i></i><i></i><i></i><i></i>
    </div>
    </div>
    </div>
    </div>
    </div>
    </article>
    </div>

    <div class="post-item">
    <article class="post-box clearfix">
    <a class="post-thumbnail"> <img src="img-samples/3-md.jpg" alt="post-1"/></a>

    <div class="top-bar">
    <span class="likes"><a href="#"><i class="icon-heart"></i>10</a></span>

    <span class="comments"><i class="icon-bubble"></i>1500</span>
    <span class="views"><i class="icon-tv"></i>2000</span>

    <span class="btn-srp"><a href="#">Music</a></span>
    </div>

    <div class="title-bar">
    <h4 class="post-title">
    <a href="#">Post With Sound Cloud</a>
    </h4>

    <div class="meta-info">
    <span class="author"><i class="icon-user3"></i><a href="#">Serpentsoft</a></span>
    <span class="date-time"><i class="icon-alarm2"></i>15 Aug 2013, 05:15 AM</span>
    </div>
    </div>

    <div class="bottom-bar">
    <span class="btn-srp"><a href="#">Read More...</a></span>

    <div class="rating">
    <div class="stars retina x-2">
    <div class="gray">
    <i></i><i></i><i></i><i></i><i></i>
    </div>

    <div class="fill" style="width: 20%">
    <div class="light">
    <i></i><i></i><i></i><i></i><i></i>
    </div>
    </div>
    </div>
    </div>
    </div>
    </article>
    </div>

    <div class="post-item">
    <article class="post-box clearfix">
    <a class="post-thumbnail"> <img src="img-samples/4-md.jpg" alt="post-1"/></a>

    <div class="top-bar">
    <span class="likes"><a href="#"><i class="icon-heart"></i>10</a></span>

    <span class="comments"><i class="icon-bubble"></i>1500</span>
    <span class="views"><i class="icon-tv"></i>2000</span>

    <span class="btn-srp"><a href="#">Technology</a></span>
    </div>

    <div class="title-bar">
    <h4 class="post-title">
    <a href="#">Honda Now Lets You 3D Print Its Concept Car Models</a>
    </h4>

    <div class="meta-info">
    <span class="author"><i class="icon-user3"></i><a href="#">Serpentsoft</a></span>
    <span class="date-time"><i class="icon-alarm2"></i>14 Aug 2013, 05:15 AM</span>
    </div>
    </div>

    <div class="bottom-bar">
    <span class="btn-srp"><a href="#">Read More...</a></span>

    <div class="rating">
    <div class="stars retina x-2">
    <div class="gray">
    <i></i><i></i><i></i><i></i><i></i>
    </div>

    <div class="fill" style="width: 40%">
    <div class="light">
    <i></i><i></i><i></i><i></i><i></i>
    </div>
    </div>
    </div>
    </div>
    </div>
    </article>
    </div>
    </div>
    </div>
    </div>
    </aside>

    <!-- Comments Box -->
    <aside class="cat-widget comments-box clearfix" itemprop="comment" itemscope="" itemtype="http://schema.org/UserComments">
    <div class="widget-title">
    <h3>
    Comments
    </h3>

    <div class="sep-widget"></div>
    </div>

    <div class="widget-content color-theme clearfix">
    <div class="comments">
    <ol class="comment-list">
    <li class="comment-main" data-showonscroll="true" data-animation="fadeIn">
    <article class="comment">
    <div class="comment-meta comment-author vcard">
    <img alt="" src="img-samples/avatars/1.png"/>
    </div>

    <div class="comment-content comment">
    <a href="#" class="time"><i class="icon-alarm2"></i>
    <time itemprop="commentTime" datetime="">
    August 14, 2013 at 05:41 am
    </time></a>

    <cite class="creator" itemprop="creator"><a href="#" class="url">Serpentsoft</a><span> - Post author</span></cite>

    <p class="text" itemprop="commentText">
    Etiam pharetra, erat sed fermentum feugiat.
    </p>

    <div class="options clearfix">
    <span class="edit-link"> <a class="comment-edit-link" href="#" title="Edit comment">Edit</a> </span>

    <span class="reply"> <a class="comment-reply-link" href="#">Reply</a>
    <meta itemprop="replyToUrl" content=""/> </span>
    </div>
    </div>
    </article>

    <ol class="children">

    <li class="comment-main" data-showonscroll="true" data-animation="fadeIn">
    <article class="comment">
    <div class="comment-meta comment-author vcard">
    <img alt="" src="img-samples/avatars/2.png"/>
    </div>

    <div class="comment-content comment">
    <a href="#" class="time"><i class="icon-alarm2"></i>
    <time itemprop="commentTime" datetime="">
    August 15, 2013 at 05:41 am
    </time></a>

    <cite class="creator" itemprop="creator"><a href="#" class="url">JoJo</a></cite>

    <p class="text" itemprop="commentText">
    Etiam pharetra, erat sed fermentum feugiat.
    </p>

    <div class="options clearfix">
    <span class="reply"> <a class="comment-reply-link" href="#">Reply</a>
    <meta itemprop="replyToUrl" content=""/> </span>
    </div>
    </div>
    </article>

    <ol class="children">

    <li class="comment-main" data-showonscroll="true" data-animation="fadeIn">
    <article class="comment">
    <div class="comment-meta comment-author vcard">
    <img alt="" src="img-samples/avatars/3.png"/>
    </div>

    <div class="comment-content comment">
    <a href="#" class="time"><i class="icon-alarm2"></i>
    <time itemprop="commentTime" datetime="">
    August 16, 2013 at 05:41 am
    </time></a>

    <cite class="creator" itemprop="creator"><a href="#" class="url">Samuel</a></cite>

    <p class="text" itemprop="commentText">
    Etiam pharetra, erat sed fermentum feugiat.
    </p>

    <div class="options clearfix">
    <span class="reply"> <a class="comment-reply-link" href="#">Reply</a>
    <meta itemprop="replyToUrl" content=""/> </span>
    </div>
    </div>
    </article>
    </li>
    </ol>
    </li>
    </ol>
    </li>

    <li class="comment-main" data-showonscroll="true" data-animation="fadeIn">
    <article class="comment">
    <div class="comment-meta comment-author vcard">
    <img alt="" src="img-samples/avatars/4.png"/>
    </div>

    <div class="comment-content comment">
    <a href="#" class="time"><i class="icon-alarm2"></i>
    <time itemprop="commentTime" datetime="">
    August 14, 2013 at 05:41 am
    </time></a>

    <cite class="creator" itemprop="creator"><a href="#" class="url">Ahmad</a></cite>

    <p class="text" itemprop="commentText">
    Etiam pharetra, erat sed fermentum feugiat.
    </p>

    <div class="options clearfix">
    <span class="reply"> <a class="comment-reply-link" href="#">Reply</a>
    <meta itemprop="replyToUrl" content=""/> </span>
    </div>
    </div>
    </article>
    </li>
    </ol>

    <div id="respond" class="comment-respond" data-showonscroll="true" data-animation="fadeIn">
    <h3 id="reply-title" class="comment-reply-title">
    Leave a Reply
    </h3>

    <form action="#" method="post" id="commentform" class="comment-form">
    <p class="comment-notes">
    Your email address will not be published. Required fields are marked <span class="required">*</span>
    </p>
    <p class="comment-form-author">
    <label for="author">
    Name <span class="required">*</span>
    </label>
    <input id="author" name="author" type="text" value="" size="30" aria-required="true"/>
    </p>
    <p class="comment-form-email">
    <label for="email">
    Email <span class="required">*</span>
    </label>
    <input id="email" name="email" type="text" value="" size="30" aria-required="true"/>
    </p>
    <p class="comment-form-url">
    <label for="url">
    Website
    </label>
    <input id="url" name="url" type="text" value="" size="30"/>
    </p>
    <p class="comment-form-comment">
    <label for="comment">
    Comment
    </label>
    <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
    </p>
    <p class="form-allowed-tags">
    You may use these <abbr title="HyperText Markup Language">HTML</abbr>
    tags and attributes:
    <code>
    &lt;a href="" title=""&gt; &lt;abbr title=""&gt; &lt;acronym title=""&gt; &lt;b&gt; &lt;blockquote cite=""&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=""&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=""&gt; &lt;strike&gt; &lt;strong&gt;
    </code>
    </p>
    <p class="form-submit">
    <input name="submit" type="submit" id="submit" value="Post Comment"/>
    </p>
    </form>
    </div>
    </div>
    </div>
    </aside>
    </footer>
    </div>
    </article>
    --%>

    <!-- Coding -->
    <%--<asp:Repeater ID="rpt" runat="server">
        <ItemTemplate>--%>
            <article class="article-container clearfix" itemscope itemtype="http://schema.org/Article">
                <div class="article-content clearfix">
                    <header>
                        <div class="breadcrumb-container clearfix" itemscope itemtype="http://schema.org/WebPage">
                            <ul class="breadcrumb ltr" itemprop="breadcrumb">
                                <li>
                                    <i class="icon-home3"></i><a href="#">Home</a>
                                </li>
                                <li>
                                    <a href="#">Technology</a>
                                </li>
                                <li>
                                    <a href="#">Smartphones</a>
                                </li>
                                <li>
                                    Bear Introduced to Snow for the First Time
                                </li>
                            </ul>
                        </div>

                        <div class="figure-container">
                            <figure class="featured-post-figure" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">

                                <img itemprop="contentURL" src="img-samples/1.png"/>

                                <figcaption itemprop="description">
                                    A few words about item
                                </figcaption>
                            </figure>
                        </div>

                        <h1 itemprop="headline">
                            <%=this.news.newsTitle %>
                        </h1>

                        <div class="post-meta">
                            <ul>
                                <li>
                                    <i class="icon-user3"></i><a href="#">Serpentsoft</a>
                                </li>
                                <li>
                                    <i class="icon-library"></i><a href="#">World</a>
                                </li>

                                <li itemprop="datePublished">
                                    <i class="icon-alarm2"></i>14 Aug, 2013 at 06:15 AM
                                </li>
                                <li>
                                    <i class="icon-bubbles4"></i><a href="#" itemprop="interactionCount">4 Comments</a>
                                </li>
                                <li itemprop="interactionCount">
                                    <i class="icon-tv"></i>35
                                </li>
                                <li itemprop="interactionCount">
                                    <i class="icon-heart"></i>100
                                </li>
                            </ul>
                        </div>
                        <div class="divider"></div>
                    </header>

                    <div class="post-entry text-justify" itemprop="articleBody">

                        <span class="drop-capital">F</span>
                        our gravida nibh vel velit auctor aliquet.
                        Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                        Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.
                        Morbi accumsan ipsum velit.
                        Nam nec tellus a odio tincidunt auctor a ornare odio.
                        Sed non mauris vitae erat consequat auctor eu in elit.
                        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                        Mauris in erat justo.
                        Nullam ac urna eu felis dapibus condimentum sit amet a augue.
                        Sed non neque elit.
                        Sed ut imperdiet nisi. <span class="highlight">Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat</span>, velit mauris egestas quam, ut aliquam massa nisl quis neque.
                        Suspendisse in orci enim.
                        <hr />
                        <%=this.news.newsContent %>

                        <ul class="post-ul">
                            <li>
                                <i class="icon-thumbs-up"></i>More Than 350 List Types.
                            </li>
                            <li>
                                <i class="icon-thumbs-up"></i>Unlimited Colors.
                            </li>
                            <li>
                                <i class="icon-thumbs-up"></i>Easy To Use.
                            </li>
                            <li>
                                <i class="icon-thumbs-up"></i>100% Unique Widget Style.
                            </li>
                            <li>
                                <i class="icon-thumbs-up"></i>Weather & Review Widgets.
                            </li>
                            <li>
                                <i class="icon-thumbs-up"></i>Author Posts.
                            </li>
                        </ul>

                        <blockquote>
                            <p>
                                Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, Highlight Text: lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibhvulputate cursus a sit amet mauris.
                            </p>
                        </blockquote>

                        <nav class="post-navigation clearfix">
                            <div class="prev-article col-md-6 col-sm-6 col-xs-12">
                                <cite>Previous Article</cite>
                                <h3>
                                    India Takes Down Its First Cyber Criminal
                                </h3>
                                <a href="#Prev_Article" class="more"></a>
                            </div>

                            <div class="next-article col-md-6 col-sm-6 col-xs-12">
                                <cite>Next Article</cite>
                                <h3>
                                    Bear Introduced to Snow for the First Time
                                </h3>
                                <a href="#Next_Article" class="more"></a>
                            </div>
                        </nav>
                    </div>

                    <footer class="article-boxes clearfix">
                        <aside class="tags-box clearfix" data-showonscroll="true" data-animation="fadeIn">
                            <div class="box-title">
                                <h3>
                                    Tagged With:
                                </h3>
                            </div>

                            <div class="box-content tags-cloud clearfix">
                                <a href="#">Technology<span class="badge">15</span></a>
                                <a href="#">President<span class="badge">10</span></a>
                                <a href="#">Coup<span class="badge">13</span></a>
                            </div>
                        </aside>

                        <aside class="share-box clearfix" data-showonscroll="true" data-animation="fadeIn">
                            <div class="box-title">
                                <h3>
                                    Share On:
                                </h3>
                            </div>

                            <div class="box-content share-icons clearfix">
                                <a href="#" class="facebook">facebook<span class="badge"><i class="zoc-facebook"></i></span></a>
                                <a href="#" class="twitter">twitter<span class="badge"><i class="zoc-twitter"></i></span></a>
                                <a href="#" class="gplus">google+<span class="badge"><i class="zoc-gplus"></i></span></a>
                                <a href="#" class="pinterest">pinterest<span class="badge"><i class="zoc-pinterest"></i></span></a>
                                <a href="#" class="stumbleupon">stumbleupon<span class="badge"><i class="zoc-stumbleupon"></i></span></a>
                            </div>
                        </aside>

                        <aside class="author-box clearfix" itemprop="author" itemscope="" itemtype="http://schema.org/Person" data-showonscroll="true" data-animation="fadeIn">
                            <div class="box-title">
                                <h3 class="hidden">
                                    Written By:
                                </h3>
                                <div itemprop="image">
                                    <img alt="Serpentsoft" src="img-samples/avatars/1.png" class="avatar"/>
                                </div>
                            </div>

                            <div class="box-content clearfix">
                                <h4 class="name">
                                    <a itemprop="name" href="pg-category.html" title="Serpentsoft">Serpentsoft</a>
                                </h4>

                                <div itemprop="description">
                                    <p>
                                        A few words about article's author, I am a Web Developer and Designer, i love computer programming either Desktop or Web
                                    </p>
                                </div>

                                <div class="social-icons">
                                    <ul class="clearfix">
                                        <li class="tooltip_item fb-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="facebook">
                                            <div class="mask-background animated lightSpeedIn"></div>
                                            <a href="#"><i class="zoc-facebook"></i></a>
                                        </li>

                                        <li class="tooltip_item twitter-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="twitter">
                                            <div class="mask-background animated lightSpeedIn"></div>
                                            <a href="#"><i class="zoc-twitter"></i></a>
                                        </li>

                                        <li class="tooltip_item googleplus-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="google+">
                                            <div class="mask-background animated lightSpeedIn"></div>
                                            <a href="#"><i class="zoc-gplus"></i></a>
                                        </li>

                                        <li class="tooltip_item pinterest-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="pinterest">
                                            <div class="mask-background animated lightSpeedIn"></div>
                                            <a href="#"><i class="zoc-pinterest"></i></a>
                                        </li>

                                        <li class="tooltip_item youtube-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="youtube">
                                            <div class="mask-background animated lightSpeedIn"></div>
                                            <a href="#"><i class="zoc-youtube"></i></a>
                                        </li>

                                        <li class="tooltip_item github-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="github">
                                            <div class="mask-background animated lightSpeedIn"></div>
                                            <a href="#"><i class="zoc-github-circled"></i></a>
                                        </li>

                                        <li class="tooltip_item flickr-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="flickr">
                                            <div class="mask-background animated lightSpeedIn"></div>
                                            <a href="#"><i class="zoc-flickr"></i></a>
                                        </li>

                                        <li class="tooltip_item rss-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="rss">
                                            <div class="mask-background animated lightSpeedIn"></div>
                                            <a href="#"><i class="zoc-rss"></i></a>
                                        </li>

                                        <li class="tooltip_item email-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="send an email to Serpentsoft">
                                            <div class="mask-background animated lightSpeedIn"></div>
                                            <a href="#"><i class="zoc-email"></i></a>
                                        </li>

                                        <li class="tooltip_item website-metro-but-16" data-toggle="tooltip" data-placement="top" title="" data-original-title="visit Serpentsoft's website">
                                            <div class="mask-background animated lightSpeedIn"></div>
                                            <a href="#"><i class="zoc-ie"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </aside>

                        <!-- Related Article Box -->
                        <aside id="divRelatedBox_1" class="cat-widget wdg-cat-scrollbox cat-scroll-box clearfix">

                            <div class="widget-title">
                                <h3>
                                    Related Articles
                                </h3>

                                <div class="sep-widget"></div>
                            </div>

                            <div class="widget-content color-theme clearfix">
                                <div>
                                    <ul class="nav-arrows list-inline">
                                        <li>
                                            <a href="#" class="backward"><i class="icon-arrow-left6"></i></a>
                                        </li>
                                        <li>
                                            <a href="#" class="forward"><i class="icon-arrow-right6"></i></a>
                                        </li>
                                    </ul>

                                    <div class="scroll-box">
                                        <div class="post-item">
                                            <article class="post-box clearfix">
                                                <a class="post-thumbnail"> <img src="img-samples/1-md.jpg" alt="post-4"/></a>

                                                <div class="top-bar">
                                                    <span class="likes"><a href="#"><i class="icon-heart"></i>10</a></span>

                                                    <span class="comments"><i class="icon-bubble"></i>1500</span>
                                                    <span class="views"><i class="icon-tv"></i>2000</span>

                                                    <span class="btn-srp"><a href="pg-category.html">Sport</a></span>
                                                </div>

                                                <div class="title-bar">
                                                    <h4 class="post-title">
                                                        <a href="#">Post With Featured Image</a>
                                                    </h4>

                                                    <div class="meta-info">
                                                        <span class="author"><i class="icon-user3"></i><a href="#">Serpentsoft</a></span>
                                                        <span class="date-time"><i class="icon-alarm2"></i>14 Aug 2013, 05:15 AM</span>
                                                    </div>
                                                </div>

                                                <div class="bottom-bar">
                                                    <span class="btn-srp"><a href="#">Read More...</a></span>

                                                    <div class="rating">
                                                        <div class="stars retina x-2">
                                                            <div class="gray">
                                                                <i></i><i></i><i></i><i></i><i></i>
                                                            </div>

                                                            <div class="fill" style="width: 90%">
                                                                <div class="light">
                                                                    <i></i><i></i><i></i><i></i><i></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </article>
                                        </div>

                                        <div class="post-item">
                                            <article class="post-box clearfix">
                                                <a class="post-thumbnail"> <img src="img-samples/2-md.jpg" alt="post-2"/></a>

                                                <div class="top-bar">
                                                    <span class="likes"><a href="#"><i class="icon-heart"></i>10</a></span>

                                                    <span class="comments"><i class="icon-bubble"></i>1500</span>
                                                    <span class="views"><i class="icon-tv"></i>2000</span>

                                                    <span class="btn-srp"><a href="#">Movies</a></span>
                                                </div>

                                                <div class="title-bar">
                                                    <h4 class="post-title">
                                                        <a href="#">Post With Youtube Video</a>
                                                    </h4>

                                                    <div class="meta-info">
                                                        <span class="author"><i class="icon-user3"></i><a href="#">Serpentsoft</a></span>
                                                        <span class="date-time"><i class="icon-alarm2"></i>14 Aug 2013, 05:15 AM</span>
                                                    </div>
                                                </div>

                                                <div class="bottom-bar">
                                                    <span class="btn-srp"><a href="#">Read More...</a></span>

                                                    <div class="rating">
                                                        <div class="stars retina x-2">
                                                            <div class="gray">
                                                                <i></i><i></i><i></i><i></i><i></i>
                                                            </div>

                                                            <div class="fill" style="width: 50%">
                                                                <div class="light">
                                                                    <i></i><i></i><i></i><i></i><i></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </article>
                                        </div>

                                        <div class="post-item">
                                            <article class="post-box clearfix">
                                                <a class="post-thumbnail"> <img src="img-samples/3-md.jpg" alt="post-1"/></a>

                                                <div class="top-bar">
                                                    <span class="likes"><a href="#"><i class="icon-heart"></i>10</a></span>

                                                    <span class="comments"><i class="icon-bubble"></i>1500</span>
                                                    <span class="views"><i class="icon-tv"></i>2000</span>

                                                    <span class="btn-srp"><a href="#">Music</a></span>
                                                </div>

                                                <div class="title-bar">
                                                    <h4 class="post-title">
                                                        <a href="#">Post With Sound Cloud</a>
                                                    </h4>

                                                    <div class="meta-info">
                                                        <span class="author"><i class="icon-user3"></i><a href="#">Serpentsoft</a></span>
                                                        <span class="date-time"><i class="icon-alarm2"></i>15 Aug 2013, 05:15 AM</span>
                                                    </div>
                                                </div>

                                                <div class="bottom-bar">
                                                    <span class="btn-srp"><a href="#">Read More...</a></span>

                                                    <div class="rating">
                                                        <div class="stars retina x-2">
                                                            <div class="gray">
                                                                <i></i><i></i><i></i><i></i><i></i>
                                                            </div>

                                                            <div class="fill" style="width: 20%">
                                                                <div class="light">
                                                                    <i></i><i></i><i></i><i></i><i></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </article>
                                        </div>

                                        <div class="post-item">
                                            <article class="post-box clearfix">
                                                <a class="post-thumbnail"> <img src="img-samples/4-md.jpg" alt="post-1"/></a>

                                                <div class="top-bar">
                                                    <span class="likes"><a href="#"><i class="icon-heart"></i>10</a></span>

                                                    <span class="comments"><i class="icon-bubble"></i>1500</span>
                                                    <span class="views"><i class="icon-tv"></i>2000</span>

                                                    <span class="btn-srp"><a href="#">Technology</a></span>
                                                </div>

                                                <div class="title-bar">
                                                    <h4 class="post-title">
                                                        <a href="#">Honda Now Lets You 3D Print Its Concept Car Models</a>
                                                    </h4>

                                                    <div class="meta-info">
                                                        <span class="author"><i class="icon-user3"></i><a href="#">Serpentsoft</a></span>
                                                        <span class="date-time"><i class="icon-alarm2"></i>14 Aug 2013, 05:15 AM</span>
                                                    </div>
                                                </div>

                                                <div class="bottom-bar">
                                                    <span class="btn-srp"><a href="#">Read More...</a></span>

                                                    <div class="rating">
                                                        <div class="stars retina x-2">
                                                            <div class="gray">
                                                                <i></i><i></i><i></i><i></i><i></i>
                                                            </div>

                                                            <div class="fill" style="width: 40%">
                                                                <div class="light">
                                                                    <i></i><i></i><i></i><i></i><i></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </article>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </aside>

                        <!-- Comments Box -->
                        <aside class="cat-widget comments-box clearfix" itemprop="comment" itemscope="" itemtype="http://schema.org/UserComments">
                            <div class="widget-title">
                                <h3>
                                    Comments
                                </h3>

                                <div class="sep-widget"></div>
                            </div>

                            <div class="widget-content color-theme clearfix">
                                <div class="comments">
                                    <ol class="comment-list">
                                        <li class="comment-main" data-showonscroll="true" data-animation="fadeIn">
                                            <article class="comment">
                                                <div class="comment-meta comment-author vcard">
                                                    <img alt="" src="img-samples/avatars/1.png"/>
                                                </div>

                                                <div class="comment-content comment">
                                                    <a href="#" class="time"><i class="icon-alarm2"></i>
                                                        <time itemprop="commentTime" datetime="">
                                                            August 14, 2013 at 05:41 am
                                                        </time></a>

                                                    <cite class="creator" itemprop="creator"><a href="#" class="url">Serpentsoft</a><span> - Post author</span></cite>

                                                    <p class="text" itemprop="commentText">
                                                        Etiam pharetra, erat sed fermentum feugiat.
                                                    </p>

                                                    <div class="options clearfix">
                                                        <span class="edit-link"> <a class="comment-edit-link" href="#" title="Edit comment">Edit</a> </span>

                                                        <span class="reply"> <a class="comment-reply-link" href="#">Reply</a>
                                                            <meta itemprop="replyToUrl" content=""/> </span>
                                                    </div>
                                                </div>
                                            </article>

                                            <ol class="children">

                                                <li class="comment-main" data-showonscroll="true" data-animation="fadeIn">
                                                    <article class="comment">
                                                        <div class="comment-meta comment-author vcard">
                                                            <img alt="" src="img-samples/avatars/2.png"/>
                                                        </div>

                                                        <div class="comment-content comment">
                                                            <a href="#" class="time"><i class="icon-alarm2"></i>
                                                                <time itemprop="commentTime" datetime="">
                                                                    August 15, 2013 at 05:41 am
                                                                </time></a>

                                                            <cite class="creator" itemprop="creator"><a href="#" class="url">JoJo</a></cite>

                                                            <p class="text" itemprop="commentText">
                                                                Etiam pharetra, erat sed fermentum feugiat.
                                                            </p>

                                                            <div class="options clearfix">
                                                                <span class="reply"> <a class="comment-reply-link" href="#">Reply</a>
                                                                    <meta itemprop="replyToUrl" content=""/> </span>
                                                            </div>
                                                        </div>
                                                    </article>

                                                    <ol class="children">

                                                        <li class="comment-main" data-showonscroll="true" data-animation="fadeIn">
                                                            <article class="comment">
                                                                <div class="comment-meta comment-author vcard">
                                                                    <img alt="" src="img-samples/avatars/3.png"/>
                                                                </div>

                                                                <div class="comment-content comment">
                                                                    <a href="#" class="time"><i class="icon-alarm2"></i>
                                                                        <time itemprop="commentTime" datetime="">
                                                                            August 16, 2013 at 05:41 am
                                                                        </time></a>

                                                                    <cite class="creator" itemprop="creator"><a href="#" class="url">Samuel</a></cite>

                                                                    <p class="text" itemprop="commentText">
                                                                        Etiam pharetra, erat sed fermentum feugiat.
                                                                    </p>

                                                                    <div class="options clearfix">
                                                                        <span class="reply"> <a class="comment-reply-link" href="#">Reply</a>
                                                                            <meta itemprop="replyToUrl" content=""/> </span>
                                                                    </div>
                                                                </div>
                                                            </article>
                                                        </li>
                                                    </ol>
                                                </li>
                                            </ol>
                                        </li>

                                        <li class="comment-main" data-showonscroll="true" data-animation="fadeIn">
                                            <article class="comment">
                                                <div class="comment-meta comment-author vcard">
                                                    <img alt="" src="img-samples/avatars/4.png"/>
                                                </div>

                                                <div class="comment-content comment">
                                                    <a href="#" class="time"><i class="icon-alarm2"></i>
                                                        <time itemprop="commentTime" datetime="">
                                                            August 14, 2013 at 05:41 am
                                                        </time></a>

                                                    <cite class="creator" itemprop="creator"><a href="#" class="url">Ahmad</a></cite>

                                                    <p class="text" itemprop="commentText">
                                                        Etiam pharetra, erat sed fermentum feugiat.
                                                    </p>

                                                    <div class="options clearfix">
                                                        <span class="reply"> <a class="comment-reply-link" href="#">Reply</a>
                                                            <meta itemprop="replyToUrl" content=""/> </span>
                                                    </div>
                                                </div>
                                            </article>
                                        </li>
                                    </ol>

                                    <div id="respond" class="comment-respond" data-showonscroll="true" data-animation="fadeIn">
                                        <h3 id="reply-title" class="comment-reply-title">
                                            Leave a Reply
                                        </h3>

                                        <form action="#" method="post" id="commentform" class="comment-form">
                                            <p class="comment-notes">
                                                Your email address will not be published. Required fields are marked <span class="required">*</span>
                                            </p>
                                            <p class="comment-form-author">
                                                <label for="author">
                                                    Name <span class="required">*</span>
                                                </label>
                                                <input id="author" name="author" type="text" value="" size="30" aria-required="true"/>
                                            </p>
                                            <p class="comment-form-email">
                                                <label for="email">
                                                    Email <span class="required">*</span>
                                                </label>
                                                <input id="email" name="email" type="text" value="" size="30" aria-required="true"/>
                                            </p>
                                            <p class="comment-form-url">
                                                <label for="url">
                                                    Website
                                                </label>
                                                <input id="url" name="url" type="text" value="" size="30"/>
                                            </p>
                                            <p class="comment-form-comment">
                                                <label for="comment">
                                                    Comment
                                                </label>
                                                <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
                                            </p>
                                            <p class="form-allowed-tags">
                                                You may use these <abbr title="HyperText Markup Language">HTML</abbr>
                                                tags and attributes:
                                                <code>
                                                    &lt;a href="" title=""&gt; &lt;abbr title=""&gt; &lt;acronym title=""&gt; &lt;b&gt; &lt;blockquote cite=""&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=""&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=""&gt; &lt;strike&gt; &lt;strong&gt;
                                                </code>
                                            </p>
                                            <p class="form-submit">
                                                <input name="submit" type="submit" id="submit" value="Post Comment"/>
                                            </p>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </aside>
                    </footer>
                </div>
            </article>
        <%--</ItemTemplate>
    </asp:Repeater>--%>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphScript" runat="server"> </asp:Content>
